<template>
  <div class="GenerateColumnSlot">
    <!-- 表格头部 -->
    <div v-if="type === 'header'" class="header">
      <span v-if="required" class="required">*</span>
      <i v-if="required" class="el-icon-edit-outline"></i>
      <span>{{ name }}</span>
    </div>
    <!-- 表格头部单 icon -->
    <div v-if="type === 'sort'" class="header">
      <i class="el-icon-sort"></i>
    </div>
    <!-- 表格单元格 -->
    <div v-if="type === 'cell' && scope.row" class="cell">
      <div
        v-if="disabled || (myEditId !== editId && !disabled)"
        class="cell-label"
        :class="myEditId === editId && disabled ? 'cell-label-active' : ''"
      >
        {{ labelName || scope.row[field] }}
      </div>
      <div v-else>
        <!-- 输入框 -->
        <el-input
          style="width: 100%"
          v-if="cellType === 'input'"
          ref="input"
          :type="inputType"
          v-model="input"
          :placeholder="`请输入${name}`"
          @blur="blur"
          size="small"
          :focus="isFocus"
        ></el-input>
        <!-- 下拉选择框 -->
        <el-select
          style="width: 100%"
          v-if="cellType === 'select'"
          ref="select"
          v-model="input"
          filterable
          :placeholder="`请选择${name}`"
          size="small"
          :focus="isFocus"
          clearable
        >
          <el-option
            v-for="(item, index) in selectData"
            :key="index"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <!-- 下拉选择框类型一 -->
        <el-select
          style="width: 100%"
          v-if="cellType === 'select1'"
          ref="select"
          v-model="input"
          filterable
          :placeholder="`请选择${name}`"
          size="small"
          :focus="isFocus"
          clearable
        >
          <el-option
            v-for="(item, index) in selectData"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GenerateColumnSlot",

  props: {
    type: {
      type: String,
      default: "header",
    },
    name: {
      type: String,
      default: "",
    },
    required: {
      type: Boolean,
      default: false,
    },
    scope: {
      type: Object,
      default: () => {
        return {};
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    field: {
      type: String,
      default: "",
    },
    editId: {
      type: String,
      default: "",
    },
    cellType: {
      type: String,
      default: "input",
    },
    inputType: {
      type: String,
      default: "text",
    },
    selectData: {
      type: [Array, Object],
      default: () => {
        return [];
      },
    },
    clear: {
      type: String,
      default: null,
    },
    labelName: {
      type: String,
      default: null,
    },
  },

  computed: {
    input: {
      get() {
        return this.scope.row[this.field];
      },
      set(val) {
        if (this.clear) {
          this.scope.row[this.clear] = null;
        }
        this.scope.row[this.field] = val;
        this.$emit("update:scope", this.scope);
      },
    },

    myEditId() {
      return this.field + this.scope.$index;
    },

    isFocus() {
      if (this.editId === this.field + this.scope.$index) {
        this.focus();
        return true;
      } else {
        return false;
      }
    },
  },

  data() {
    return {};
  },

  mounted() {},

  methods: {
    focus() {
      setTimeout(() => {
        let input = this.$refs.input;
        if (input) {
          input.focus();
        }
        let select = this.$refs.select;
        if (select) {
          select.focus();
        }
      }, 0);
    },

    blur() {
      this.$emit("update:editId", null);
    },
  },
};
</script>

<style lang="scss" scoped>
.GenerateColumnSlot {
  background: transparent;

  // 表格头
  .header {
    height: 30px;
    line-height: 30px;

    .required {
      color: red;
    }

    span {
      margin: 0 5px;
    }
  }

  // 单元格
  .cell {
    $height: 35px;
    position: relative;
    width: 100%;
    min-height: $height;

    .cell-label {
      padding: 0 10px;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      line-height: calc($height - 4px);
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 2px solid;
      border-color: transparent;
      border-radius: 5px;
      box-sizing: border-box;
      transition: all 0.35s;
    }

    .cell-label-active {
      border-color: #409eff;
    }
  }
}
</style>
